<template>
  <el-dialog title="导入手机号" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="700px">
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <el-form-item label="手机号码：" prop="name" class="fileUpload">
        <div class="downFile">表格模版</div>
        <FileUpload v-model="form.file" :limit="1">
        </FileUpload>
      </el-form-item>
      <el-form-item label="打上企微标签：" prop="name">
        <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
      </el-form-item>
      <el-form-item label="打上智能标签：" prop="name">
        <MultipleSelect size="small" placeholder='智能标签' :receiverNameOpt='lableOpt'/>
      </el-form-item>
      <el-form-item label="过滤设置：" prop="name">
        <el-switch
          v-model="form.name">
        </el-switch>
        过滤列表中已有的手机号
        <el-tooltip class="item" effect="dark" placement="top-start">
          <div slot="content">
            <p>（1）过滤已有重复手机号开启，不判断已存在手机号当前的打招呼状态，全部自动过滤重复的手机号。</p>
            <p>（2）过滤已有重复手机号关闭，重复手机号处理逻辑如下：</p>
            <p> a. 还未打过招呼，状态为待分配的手机号自动过滤；</p>
            <p>b. 已打招呼微信已通过的手机号，自动过滤；</p>
            <p>c. 已打招呼微信未通过的手机号，优先分配给前一次打招呼的企微号重新发起打招呼；</p>
            <p> d. 微信不存在的手机号，自动重新发起打招呼；</p>
          </div>
          <svg-icon icon-class="iquestion" style="margin-left: 5px"></svg-icon>

        </el-tooltip>
      </el-form-item>
    </el-form>
    <div class="footer-btn" slot="footer">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
      <el-button @click="onSubmit('form')">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import MultipleSelect from "@/views/components/multipleSelect.vue";
export default {
  name: 'exportPhone',
  components: {
    MultipleSelect,
  },
  data() {
    return {
      form: {
        phone: null,//手机号码
      },
      lableOpt: [
        {
          value: 1, label: '客户等级', children: [
            {value: 3, label: '核心',},
            {value: 4, label: '重要',},
            {value: 5, label: '一般',}
          ]
        },
        {
          value: 2, label: '客户等级2', children: [
            {value: 6, label: '可爱',},
            {value: 7, label: '知性',},
            {value: 8, label: '性感',}
          ]
        }
      ],
      rules: {
        'name': [
          {required: true, message: '请输入标签名称', trigger: 'blur'}
        ],

      },
    }
  },
  created() {
  },
  mounted() {
  },
  watch: {},
  methods: {
    onSubmit(formName) {
      //提交的代码
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('提交表单');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.footer-btn {
  display: flex;
  justify-content: flex-end;
}

.item-li {
  padding: 16px;
  background: #f7f7f7;
  border-radius: 2px;

  .el-radio-group {
    margin-bottom: 10px;
  }
}

::v-deep .el-dialog__body {
  overflow-y: auto;
  min-height: 300px;
  max-height: 600px;

  .el-form-item {
    border: none !important;

    .el-form-item__label {
      padding-bottom: 0px
    }

    .item-big {
      display: flex;

      .el-button--medium {
        padding: 0px 10px;
        margin-left: 20px;
      }
    }
  }
}
.fileUpload {
  position: relative;
  .downFile {
    position: absolute;
    left:100px;
    top: 0px;
    color: #3070ff;
  }
}
</style>
